<!-- 上传资源列表 -->
<template>
  <div class="container">
    <div ref="searchBox">
      <el-form ref="modelForm" :model="queryPrams">
        <SearchArea
          :listUrl="pageUrl.list"
          @ok="getListData(pageUrl.list)"
          @reset="handleReset(modelForm, {}, pageUrl.list)"
        >
          <el-col :span="8">
            <BaseInput
              label="发送状态"
              v-model="queryPrams.originatorName"
              prop="originatorName"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
        </SearchArea>
      </el-form>
    </div>
    <div class="list">
      <div class="actionList">
        <BaseButton :icon="Plus" @handleClick="handleAdd">新增</BaseButton>
      </div>
      <el-table
        :data="dataSourse"
        :max-height="tableHeight"
        :border="false"
        :highlight-current-row="true"
        row-key="uid"
      >
        <el-table-column type="index" align="center" label="序号" width="100" />
        <el-table-column
          prop="emailId"
          align="center"
          label="邮件ID"
          width="140"
        />
        <el-table-column
          prop="emailImmediately"
          align="center"
          label="邮件属性"
          width="140"
        >
          <template #default="scope">
            {{ emailImmediatelyMap.get(scope.row.emailImmediately) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="emailClassify"
          align="center"
          label="邮件分类"
          width="140"
        >
          <template #default="scope">
            {{ emailClassifyMap.get(scope.row.emailClassify) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="emailSendUserName"
          align="center"
          label="发送人"
        />
        <el-table-column
          prop="emailReceivedName"
          align="center"
          label="接收人"
        />
        <el-table-column
          prop="emailStatus"
          align="center"
          label="邮件状态"
          width="140"
        >
          <template #default="{ row }">
            <span
              :class="
                row.emailStatus === 1
                  ? 'primary'
                  : row.emailStatus === 2
                  ? 'success'
                  : 'error'
              "
              >{{ emailStatusMap.get(row.emailStatus) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="emailStatusCause"
          :show-overflow-tooltip="true"
          align="center"
          label="状态描述"
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.emailStatusCause }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="emailTemplateUrl"
          align="center"
          label="预览链接"
          width="180"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="emailCreateDate"
          align="center"
          label="创建时间"
          width="180"
        />
        <el-table-column
          prop="emailSendDate"
          align="center"
          label="预定发送时间"
          width="180"
        />
        <el-table-column
          prop="emailRealitySendDate"
          align="center"
          label="实际发送时间"
          width="180"
        />
        <el-table-column align="right" fixed="right" label="操作">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div ref="paginationBox">
        <BasePagination
          :pageSourse="pageSourse"
          :pageSizes="[10, 20, 30, 50]"
          :queryPrams="queryPrams"
          :listUrl="pageUrl.list"
          layout="total, pager, jumper, sizes"
          @onSearch="getListData(pageUrl.list)"
        >
        </BasePagination>
      </div>
    </div>
    <emailAdd ref="emailAddRef" @refresh="getListData(pageUrl.list)"></emailAdd>
  </div>
</template>

<script setup lang="ts" name="system-resource">
import * as api from "@/api/index";
import { SearchArea } from "@components/FormSearch/index";
import { BaseInput } from "@components/BaseForm/index";
import { type FormInstance } from "element-plus";
import { ElMessage as message } from "element-plus";
import usePageListData from "@/publicTs/pageListData";
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import emailAdd from "./modules/email-add.vue";
interface emailAddRefType {
  handleShow: () => void;
}
let emailImmediatelyMap = new Map([
  [1, "即时发送"],
  [2, "定时发送"],
]);
let emailClassifyMap = new Map([
  [1, "任务通知"],
  [2, "系统公告"],
  [3, "私人专送"],
]);
let emailStatusMap = new Map([
  [1, "待发送"],
  [2, "发送成功"],
  [3, "发送失败"],
]);
let {
  pageSourse,
  dataSourse,
  queryPrams,
  handleReset,
  getListData,
  computedTableHeight,
} = usePageListData();

// form表单实例
let modelForm = ref<any>();
// 检索区元素
const searchBox: any = ref(null);
// 新增邮件弹窗元素
const emailAddRef = ref<emailAddRefType | null>(null);

// 列表相关url
let pageUrl = {
  list: api.admin.URL_EMAILLIST,
};
// table渲染高度
let tableHeight = ref(600);
onMounted(() => {
  handleReset(modelForm.value, {}, pageUrl.list);
  tableHeight.value = computedTableHeight(searchBox.value);
});

let handleDel = (item: any) => {
  api.admin.delEmail({ emailId: item.emailId }).then((res) => {
    if (res.header.code === 999) {
      getListData(pageUrl.list);
      message.success("删除成功");
    } else {
      message.error(res.header.message);
    }
  });
};

let handleAdd = () => {
  emailAddRef.value?.handleShow();
};
</script>

<style lang="less" scoped>
.container {
  padding: 0px 24px;
  box-sizing: border-box;
  .list {
    .actionList {
      display: flex;
      justify-content: right;
      padding: 8px 16px;
    }
  }
}
</style>
